<template>
  <div class="user-statistics">
    <!-- 统计标题栏 -->
    <div class="statistics-header">
      <h3>用户统计</h3>
      <el-button type="primary" plain size="small" @click="handleRefresh">
        <el-icon><Refresh /></el-icon> 刷新
      </el-button>
    </div>
    
    <!-- 用户统计卡片 -->
    <div class="stats-cards" v-if="stats">
      <el-card class="stats-card">
        <template #header>
          <div class="card-header">总用户数</div>
        </template>
        <div class="card-value">{{ stats.totalUsers || 0 }}</div>
      </el-card>
      
      <el-card class="stats-card">
        <template #header>
          <div class="card-header">活跃用户数</div>
        </template>
        <div class="card-value">{{ stats.activeUsers || 0 }}</div>
      </el-card>
      
      <el-card class="stats-card">
        <template #header>
          <div class="card-header">今日新增</div>
        </template>
        <div class="card-value">{{ stats.newUsersToday || 0 }}</div>
      </el-card>
      
      <el-card class="stats-card">
        <template #header>
          <div class="card-header">本周新增</div>
        </template>
        <div class="card-value">{{ stats.newUsersThisWeek || 0 }}</div>
      </el-card>
      
      <el-card class="stats-card">
        <template #header>
          <div class="card-header">本月新增</div>
        </template>
        <div class="card-value">{{ stats.newUsersThisMonth || 0 }}</div>
      </el-card>
    </div>
    
    <!-- 用户角色分布 -->
    <div class="role-distribution" v-if="stats && stats.totalUsers">
      <el-card>
        <template #header>
          <div class="card-header">用户角色分布</div>
        </template>
        <div class="role-stats">
          <div class="role-item">
            <div class="role-label">普通用户</div>
            <div class="role-value">{{ userRoleData.normalUsers }}</div>
            <el-progress :percentage="calculateRolePercentage('normalUsers')" color="#909399"></el-progress>
          </div>
          <div class="role-item">
            <div class="role-label">专家用户</div>
            <div class="role-value">{{ userRoleData.expertUsers }}</div>
            <el-progress :percentage="calculateRolePercentage('expertUsers')" color="#67C23A"></el-progress>
          </div>
          <div class="role-item">
            <div class="role-label">管理员</div>
            <div class="role-value">{{ userRoleData.adminUsers }}</div>
            <el-progress :percentage="calculateRolePercentage('adminUsers')" color="#F56C6C"></el-progress>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { Refresh } from '@element-plus/icons-vue';

const props = defineProps({
  stats: {
    type: Object,
    default: () => null
  }
});

const emit = defineEmits(['refresh']);

// 处理用户角色数据映射
const userRoleData = computed(() => {
  if (!props.stats) return { normalUsers: 0, expertUsers: 0, adminUsers: 0 };
  
  // 后端可能会使用不同的字段名称
  const roleData = props.stats.usersByRole || {};
  
  return {
    normalUsers: roleData.normalUsers || roleData['普通用户'] || 0,
    expertUsers: roleData.expertUsers || roleData['专家用户'] || 0,
    adminUsers: roleData.adminUsers || roleData['管理员'] || 0
  };
});

// 计算角色百分比
const calculateRolePercentage = (roleKey) => {
  if (!props.stats || !props.stats.totalUsers) {
    return 0;
  }
  
  const roleCount = userRoleData.value[roleKey] || 0;
  return Math.round((roleCount / props.stats.totalUsers) * 100);
};

// 刷新统计数据
const handleRefresh = () => {
  emit('refresh');
};
</script>

<style scoped>
/* 统计标题样式 */
.statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.statistics-header h3 {
  margin: 0;
  color: #303133;
}

/* 用户统计卡片样式 */
.stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.stats-card {
  flex: 1;
  min-width: 180px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.card-value {
  font-size: 32px;
  font-weight: 600;
  color: #409EFF;
  text-align: center;
  padding: 10px 0;
}

/* 角色分布样式 */
.role-distribution {
  margin-bottom: 24px;
}

.role-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.role-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-label {
  font-size: 14px;
  color: #606266;
}

.role-value {
  font-size: 16px;
  font-weight: 500;
}
</style> 